import ReactECharts from "echarts-for-react";
import React from "react";
// 中间弹窗空气数值柱状图
const AirBarEcharts = ({ airData }) => {
  const unitMap = {
    空气质量: "μg/m³",
    "PM2.5": "μg/m³",
    二氧化硫: "μg/m³",
    二氧化氮: "μg/m³",
    臭氧: "μg/m³",
    一氧化碳: "μg/m³",
    PM10: "μg/m³",
    温度: "°C",
    湿度: "%",
    气压: "hPa",
    降雨量: "mm",
  };
  const enumer = {
    SO2: "二氧化硫",
    NO2: "二氧化氮",
    PM25: "PM2.5",
    PM10: "PM10",
    O3: "臭氧",
    temp: "温度",
    humi: "湿度",
    "PM2.5": 20,
  };

  const { long, lat, i, ...newairData } = airData; // 不使用long, lat
  delete newairData["PM2.5"];
  const categories = Object.keys(newairData);
  const fullNames = categories.map((item) => enumer[item]);

  // 提取值（values）
  const values = Object.values(newairData);
  const option = {
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [{
      type: "category",
      data: fullNames,
      axisLine: { show: false },
      axisTick: { show: false },
 
    }],
    series: [
      {
        type: "bar",
        data: values,
        barWidth: 2,

        itemStyle: {
          color: "#00ff9d", // 其他项使用绿色
        },
        label: {
          show: true,
          position: "right",
          color: "#fff",
          fontSize: 10,
          formatter: function (params) {
            console.log(params,'params')
            return `${params.value} ${unitMap[params.name]}`;
          },
        },
      },
      {
        show: true,
        type: "bar",
        barGap: "-100%",
        barWidth: "5px",
        itemStyle: {
          normal: {
            barBorderRadius: 200,
            color: "rgba(22,203,115,0.05)",
          },
        },
        data: [300, 300, 300, 300, 300, 300, 300],
      },
    ],
  };

  return (
    <ReactECharts
      option={option}
      style={{ width: "350px", height: "200px" }}
      opts={{ renderer: "canvas" }}
    />
  );
};

export default AirBarEcharts;
